<script lang="ts" setup name="CallbackPatch">
import { ref } from 'vue'
import { useField, useForm } from 'vee-validate'
import { accountRule, codeRule, isAgreeRule, mobileRule, passwordRule, rePasswordRule } from '@/utils/validate'
import { useCountDown } from '@/utils/hooks'
import useStore from '@/store'
import Message from '@/components/message'
import { useRouter } from 'vue-router'
const router = useRouter()
const { user } = useStore()

//  获取openId
let openId = ''
// 判断QQ是否登录
if (QC.Login.check()) {
  // 获取openId
  QC.Login.getMe(id => {
    console.log(id)
    openId = id
  })
}

const { validate } = useForm({
  validationSchema: {
    account: accountRule,
    mobile: mobileRule,
    code: codeRule,
    password: passwordRule,
    rePassword: rePasswordRule
  },
  // 提供初始值
  initialValues: {
    account: 'cheer_th',
    mobile: '16600006666',
    code: '123456',
    password: '123456',
    rePassword: '123456'
  }
})
const { value: account, errorMessage: accountError } = useField<string>('account')
const { value: mobile, errorMessage: mobileError, validate: mobileValidate } = useField<string>('mobile')
const { value: code, errorMessage: codeError } = useField<string>('code')
const { value: password, errorMessage: passwordError } = useField<string>('password')
const { value: rePassword, errorMessage: rePasswordError } = useField<string>('rePassword')
const { time, start } = useCountDown(6)
const getCode = async () => {
  if (time.value) return
  const res = await mobileValidate()
  if (!res.valid) return
  console.log(1)
  await user.reqRegisterCode(mobile.value)
  Message.success('验证码已发送')
  start()
}
const register = async () => {
  const res = await validate()
  if (!res.valid) return
  await user.reqRegister({
    openId,
    mobile: mobile.value,
    code: code.value,
    account: account.value,
    password: password.value
  })
  Message.success('注册成功')
  router.push('/')
}
</script>
<template>
  <div class="xtx-form">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <input v-model="account" class="input" type="text" placeholder="请输入用户名" />
      </div>
      <div class="error" v-if="accountError">{{ accountError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <input v-model="mobile" class="input" type="text" placeholder="请输入手机号" />
      </div>
      <div class="error" v-if="mobileError">{{ mobileError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <input v-model="code" class="input" type="text" placeholder="请输入验证码" />
        <span @click="getCode" class="code">{{ time ? time + 's后获取' : '发送验证码' }}</span>
      </div>
      <div class="error" v-if="codeError">{{ codeError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input v-model="password" class="input" type="password" placeholder="请输入密码" />
      </div>
      <div class="error" v-if="passwordError">{{ passwordError }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <input v-model="rePassword" class="input" type="password" placeholder="请确认密码" />
      </div>
      <div class="error" v-if="rePasswordError">{{ rePasswordError }}</div>
    </div>
    <a href="javascript:;" class="submit" @click="register">立即提交</a>
  </div>
</template>

<style scoped lang="less">
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
